// composables/usePageVisibility.ts
import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue';

/**
 * 判断页面是否可见的 Composable
 * 使用 Page Visibility API 并结合 Vue 的生命周期
 */
export function usePageVisibility() {
  // 使用 ref 存储可见性状态
  const isVisible = ref(true);
  const visibilityState = ref(document.visibilityState || 'visible');

  // 更新状态的函数
  const updateVisibility = () => {
    isVisible.value = !document.hidden;
    visibilityState.value = document.visibilityState;
  };

  // 监听 visibilitychange 事件
  const handleVisibilityChange = () => {
    updateVisibility();
  };

  onMounted(() => {
    // 初始化状态
    updateVisibility();

    // 添加事件监听
    document.addEventListener('visibilitychange', handleVisibilityChange);

    // 注意：Page Visibility API 已经能处理标签页切换和窗口最小化
    // 通常不需要额外监听 focus/blur，除非有特殊需求
  });

  onUnmounted(() => {
    document.removeEventListener('visibilitychange', handleVisibilityChange);
  });

  // 额外处理：当组件被 keep-alive 缓存时
  // 在组件被激活/失活时更新状态（可选，取决于你的 keep-alive 策略）
  onActivated &&
    onActivated(() => {
      updateVisibility();
    });

  onDeactivated &&
    onDeactivated(() => {
      // 假设组件失活时页面也不可见（根据业务逻辑调整）
      isVisible.value = false;
    });

  return {
    isVisible, // 布尔值: 是否可见
    visibilityState, // 字符串: 'visible', 'hidden', 'prerender'
  };
}
